<template>
  <div>
    <div class="discount" :class="{'translateX':isActive}">
      <!-- 头 -->
      <div class="index-topbars">
        <div class="topbars">
          <p class="crumb" @click="showAside">三</p>
          <p class="top_search">
            <van-search
              shape="round"
              v-model="value"
              placeholder="请输入搜索关键词"
              @search="onSearch"
              background="none"
            />
          </p>
        </div>
      </div>
      <div class="dis_swipe">
        <van-swipe @change="onChange" :autoplay="3000">
          <van-swipe-item v-for="(item,idex) in imgData" :key="idex">
            <img :src="item.itemImg" width="100%" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 头结束 -->
      <van-grid :icon-size="40" :column-num="4" :border="false">
        <van-grid-item
          v-for="(value,index) in grid"
          :key="index"
          :icon="value.gimg"
          :text="value.title"
        />
      </van-grid>
      <!-- 门票开始 -->
      <ul class="dissubcategory">
        <li v-for="(item,index) in liData" :key="index">
          <img class="liImg" :src="item.liImg" alt />
          <span class="title">{{item.title}}</span>
        </li>
      </ul>
      <!-- 列表 -->
      <div class="disList">
        <p class="index-choiceProduct-title">精选折扣</p>
        <ul class="listUl">
          <li class="listLi" v-for="(value,index) in homeList" :key="index">
            <img class="pl33" :src="value.avator" alt />
            <p class="listtitle">{{value.title}}</p>
            <p class="price">
              <em>{{value.nlikes}}</em>元起
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 侧边栏 -->
    <transition :duration="1000">
      <aside class="qui-asides" v-show="isActive">
        <section class="js_qui-aside" :class="{'translateX':isActive}">
          <section class="qui-asideHead">
            <p class="signBtn">
              <a href="#" @click="tologin" id="js_login" data-bn-ipg="mindex-left-nav-login">登录</a> /
              <a href="#" @click="toreg" data-bn-ipg="mindex-left-nav-reg">注册</a>
            </p>
          </section>
          <nav class="qui-asideNav">
            <ul>
              <li v-for="(val,idx) in asideNav" :key="idx" @click="goPath(val.path)">
                <a>
                  <span class="qui-icon _home"></span>
                  {{val.navtitle}}
                </a>
              </li>
            </ul>
          </nav>
          <section class="qui-asideTool">
            <ul id="js_frame_asideTool">
              <li>
                <a href="//m.qyer.com/comment/hot" data-bn-ipg="mindex-left-nav-comment">
                  <span class="qui-icon _reply_line"></span>
                  <span>写点评</span>
                </a>
              </li>
              <li>
                <a
                  href="//m.qyer.com/ask/addquestion?fr=41"
                  id="js_ask_question_form"
                  data-bn-ipg="mindex-left-nav-question"
                >
                  <span class="qui-icon _question"></span>
                  <span>提问题</span>
                </a>
              </li>
            </ul>
          </section>
        </section>
      </aside>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      isActive: false,
      homeList: [],
      imgData: [
        {
          itemImg:
            "https://pic.qyer.com/public/lmapp/op_conf/2019/09/05/15676684556369?imageMogr2/thumbnail/!750x375r"
        },
        {
          itemImg:
            "https://pic.qyer.com/public/lmapp/op_conf/2019/09/19/15688898077487?imageMogr2/thumbnail/!750x375r"
        }
      ],
      grid: [
        {
          gimg:
            "https://pic.qyer.com/public/mzworld/barconf/2017/03/09/14890319834715",
          title: "自由行"
        },
        {
          gimg:
            "https://pic.qyer.com/public/mzworld/barconf/2017/03/07/14888571565144",
          title: "优惠机票"
        },
        {
          gimg:
            "https://pic.qyer.com/public/mzworld/barconf/2017/03/07/14888573031809",
          title: "当地玩乐"
        },
        {
          gimg:
            "https://pic.qyer.com/public/mzworld/barconf/2017/03/07/14888575672497",
          title: "签证"
        },
        {
          gimg:
            "https://pic.qyer.com/public/mzworld/barconf/2017/03/07/14888577761167",
          title: "租车自驾"
        },
        {
          gimg:
            "https://pic.qyer.com/public/mzworld/barconf/2017/03/07/14888735248675",
          title: "酒店"
        },
        {
          gimg:
            "https://pic.qyer.com/public/mzworld/barconf/2017/07/17/15002721026136",
          title: "邮轮"
        },
        {
          gimg:
            "//common1.qyerstatic.com/zworld/m/project/index/images/category_all.png",
          title: "全部"
        }
      ],
      liData: [
        {
          liImg:
            "https://pic.qyer.com/public/mzworld/m_pages/2017/03/07/14888690439619",
          title: "门票/票券"
        },
        {
          liImg:
            "https://pic.qyer.com/public/mzworld/m_pages/2019/01/07/15468410771139",
          title: "JR Pass频道"
        },
        {
          liImg:
            "https://pic.qyer.com/public/mzworld/m_pages/2017/03/07/14888772886732",
          title: "WiFi"
        },
        {
          liImg:
            "https://pic.qyer.com/public/mzworld/m_pages/2019/01/07/15468407757416",
          title: "欧铁频道"
        },
        {
          liImg:
            "https://pic.qyer.com/public/mzworld/m_pages/2017/03/07/14888774385017",
          title: "保险频道"
        },
        {
          liImg:
            "https://pic.qyer.com/public/mzworld/m_pages/2017/03/07/14888775556615",
          title: "接送机"
        }
      ],
      asideNav: [
        { navtitle: "首页", path: "Home" },
        { navtitle: "行程助手", path: "dis" },
        { navtitle: "穷游锦囊", path: "list" },
        { navtitle: "穷游商城", path: "Home" },
        { navtitle: "问答", path: "Home" },
        { navtitle: "论坛", path: "Home" },
        { navtitle: "穷游出品", path: "Home" },
        { navtitle: "目的地", path: "Home" },
        { navtitle: "酒店", path: "Home" },
        { navtitle: "机票", path: "Home" },
        { navtitle: "APP", path: "Home" },
        { navtitle: "论坛", path: "Home" },
        { navtitle: "穷游出品", path: "Home" },
        { navtitle: "写点评", path: "Home" },
        { navtitle: "提问题", path: "Home" }
      ]
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onChange(index) {
      //   Toast('当前 Swipe 索引：' + index);
    },
    showAside() {
      this.isActive = !this.isActive;
    },
    goPath(path) {
      this.$router.push({ path: "home" });
    },
    tologin() {
      this.$router.push("login");
    },
    toreg() {
      this.$router.push("reg");
    }
  },
  created() {
    this.$axios.post('/api/biu_list',{params:{
				ajaxID:'5cd8d69ef1d508c32233475c'
    }})
    .then((res)=>{
       this.homeList = res.data.data
    })
    .catch((err)=>{
    })
  },
};
</script>
<style lang="scss" scoped>
.discount {
  background-color: #f5f5f5;
  height: 100%;
  transition: transform 0.4s;
  .index-topbars {
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 90px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
    .topbars {
      display: flex;
      text-align: center;
      width: 100%;
      height: 0.9rem;
      line-height: 0.9rem;
      .crumb {
        font-size: 20px;
        color: azure;
        font-weight: 600;
        flex: 2;
      }
      .top_search {
        flex: 8;
        .van-search__content {
          background-color: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
  .dissubcategory {
    overflow-x: hidden;
    overflow: hidden;
    margin: 0.25rem 0;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 33%;
      border-bottom: 1px solid #f5f5f5;
      padding: 11px 0 10px 10px;
      font-size: 0.26rem;
      &:nth-child(3n + 2) {
        border-left: 1px solid #f5f5f5;
      }
      &:nth-child(3n + 3) {
        border-left: 1px solid #f5f5f5;
      }
    }
    .liImg {
      width: 0.34rem;
      height: 0.34rem;
      margin-right: 0.1rem;
    }
    .title {
      color: #646464;
    }
  }
  .disList {
    overflow: hidden;
    background-color: white;
    .index-choiceProduct-title {
      margin: 13px;
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      line-height: 24px;
    }
  }
  .listUl {
    width: 100%;
    padding-right: 15px;
    .listLi {
      float: left;
      box-sizing: border-box;
      width: 50%;
      padding-left: 0.25rem;
      padding-bottom: 0.2rem;
      .pl33 {
        width: 3.2rem;
        height: 2.1rem;
      }
      .listtitle {
        height: 38px;
        overflow: hidden;
        margin-top: 8px;
        font-size: 0.3rem;
        line-height: 19px;
        color: #1f2023;
      }
      .price {
        margin-top: 6px;
        font-size: 11px;
        line-height: 18px;
        color: rgba(31, 32, 35, 0.4);
        em {
          font-size: 15px;
          color: #ff7467;
        }
      }
    }
  }
}
.translateX {
  transform: translateX(250px);
}
// 侧边栏
.qui-asides {
  position: absolute;
  left: -250px;
  top: 0;
  width: 250px;
  font-size: 14px;
  background-color: #2d3741;
  .js_qui-aside {
    transition: transform 0.4s;
    width: 250px;
    background-color: #2d3741;
    overflow-y: scroll;
    background-color: #2d3741;
    position: fixed;
    top: 0;
    width: 250px;
    bottom: 0;
    .qui-asideHead {
      padding: 13px 10px 10px;
      .signBtn {
        text-align: right;
        line-height: 18px;
        color: #fff;
        a {
          color: #fff;
        }
      }
    }
  }
  .qui-asideNav {
    li {
      border-top: 1px solid #232d34;
      background-color: #36424b;
      a {
        font-size: 16px;
        color: #ced1d5;
        display: block;
        padding-left: 15px;
        line-height: 44px;
      }
      .qui-icon {
        font-size: 18px;
        margin-right: 19px;
        color: #b6becb;
      }
    }
  }
  .qui-asideTool {
    margin-bottom: 50px !important;
    border-top: 9px solid #232d34;
    background-color: #2d3741;
    li {
      border-top: 1px solid #232d34;
      a {
        font-size: 16px;
        color: #ced1d5;
        display: block;
        padding-left: 15px;
        line-height: 44px;
        .qui-icon {
          color: #9fceda;
          font-size: 18px;
          margin-right: 19px;
        }
      }
    }
  }
}
</style>